<template>
	<view class="container">
		<!-- 地图 -->
		<map id="theMap" :latitude="latitude" :longitude="longitude" style="width: 100%; height: 70vh;"
			:scale="mapscale" :markers="markers" @regionchange="resetScale">
		</map>

		<view class="main">
			<!-- 刷新按钮 -->
			<view class="refresh" @click="mapControl">
				<image src="https://img2.baidu.com/it/u=4280698005,701996916&fm=26&fmt=auto&gp=0.jpg" mode="heightFix">
				</image>
			</view>
			<!-- 提示信息 -->
			<view class="mes box">
				<text>{{results}} <text class="time">{{time}}</text></text>
			</view>

			<!-- 用户可选操作 -->
			<view class="operate box">
				<view class="tool" v-for="item in tools" :key="item.id">
					<image :class="item.class" :src="item.icon" mode="heightFix"></image>
					<text>{{item.title}}</text>
				</view>
			</view>

			<!-- 服务价格 -->
			<view class="box">
				<scroll-view scroll-y>
					<view class="message" v-for="item in service" :key="item.id">
						<view class="pic">
							<image src="../../../../static/zhang/doctor.png" mode="widthFix"></image>
						</view>
						<view class="service">
							<text>{{item.service}}</text>
							<text>{{"￥" + item.price}}</text>
						</view>
					</view>
				</scroll-view>

				<view class="count">
					<text>小计</text>
					<text>{{"￥" + count}}</text>
				</view>
			</view>

			<!-- 服务信息 -->
			<view class="box">
				<view class="title">服务信息</view>
				<view class="title info " v-for="item in serviceInfo" :key="item.id">
					<text>{{item.title}}</text>
					<text>{{item.content}}</text>
				</view>
			</view>

			<!-- 订单信息 -->
			<view class="box">
				<view class="title">订单信息</view>
				<view class="title info " v-for="item in orderInfo" :key="item.id">
					<text>{{item.title}}</text>
					<view>{{item.content}}
						<view id="copy" v-if="item.title == '订单编号'" @click="getNumber(item.content)">复制</view>
					</view>
				</view>
			</view>

		</view>
	</view>
	</view>
</template>

<script>
	import QQMapWX from '../../../../untils/zhang/qqmap-wx-jssdk.js'
	import app from '../../../../App.vue'
	export default {
		data() {
			return {
				mapscale: 15,
				results: "陪护员已为您服务时长：",
				latitude: 0,
				longitude: 0,
				count: 0,
				time:"10:20",
				tools: [
					{
						id: 1,
						icon: "../../../../static/zhang/comfirm.png",
						title: "确认完成",
						canUse: true,
						class: "",
					},
					{
						id: 2,
						icon: "../../../../static/zhang/merchant.png",
						title: "联系平台",
						canUse: true,
						class: "",
					},
					{
						id: 3,
						icon: "../../../../static/zhang/cancel.png",
						title: "取消订单",
						canUse: false,
						class: "",
					},
				],
				service: [{
						id: 1,
						service: "助医服务",
						price: 38,
					},
					{
						id: 2,
						service: "陪护服务",
						price: 15,
					},
					{
						id: 3,
						service: "助医服务",
						price: 38,
					},
				],
				serviceInfo: [{
						id: 1,
						title: "服务地址",
						content: "上海黄浦区黄浦江边上",
					},
					{
						id: 2,
						title: "电话",
						content: "1528884213",
					},
					{
						id: 3,
						title: "陪护员",
						content: "张晓华",
					}
				],
				orderInfo: [{
						id: 1,
						title: "备注",
						content: "来个技术好的",
					},
					{
						id: 2,
						title: "订单编号",
						content: "1233457868273"
					}, {
						id: 3,
						title: "下单事件",
						content: "2018-12-12 00:01:01"
					}, {
						id: 4,
						title: "支付方式",
						content: "免支付"
					},
				],
				markers: [{
						id: 1,
						latitude: 0,
						longitude: 0,
						iconPath: "../../../../static/zhang/doctor2.png",
						width: 45,
						height: 45,
						callout: {
							display: "ALWAYS",
							content: " 陪护员正在服务 ",
							padding: 5,
							color: "#fff",
							fontSize: 18,
							bgColor: "#27BEC4",
							borderRadius: 5
						}
					},
				],
			}
		},
		methods: {
			setClass() {
				this.tools.forEach(item => {
					item.canUse == true ? item.class = "canuse" : item.class = "cantuse"
				})
			},
			countPrice() {
				let r = 0;
				this.service.forEach(item => {
					r = r + item.price
				})
				this.count = r;
			},
			getNumber(num) {
				uni.setClipboardData({
					data: num,
					success: () => {
						uni.showToast({
							title: "复制成功",
							duration: 2000
						});
					},
					fail: function(err) {
						uni.showToast({
							title: '复制失败',
							duration: 2000
						});
					}
				})
			},
			getMapAddress() {
				const tMap = new QQMapWX({
					key: '46OBZ-2A3LV-ZUQPR-UNWJY-W4CY6-A6BYC' //开发者密钥
				});
				//使用 uni.getLocation获取用户所在经纬度
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					success: (res) => {
						console.log("获取经纬度成功");
						this.markers[0].latitude = res.latitude;
						this.markers[0].longitude = res.longitude;
						this.longitude = res.longitude;
						this.latitude = res.latitude;
					},
					fail: () => {
						console.log("获取经纬度失败");
					},
					complete: () => {
						// 使用腾讯sdk的reverseGeocoder方法 解析经纬度,获取详细文字地址
						tMap.reverseGeocoder({
							location: {
								latitude: this.latitude,
								longitude: this.longitude
							},
							success: res => {
								// console.log("解析地址成功", res);
								// console.log("当前地址：", res.result.address);
								this.address = res.result.address;
								//保存缓存
								uni.setStorage({
									key: 'local',
									data: res.result.address,
									success() {
										console.log("用户地址信息已缓存")
									}
								})
							},
							fail: function(res) {
								uni.showToast({
									title: '定位失败',
									duration: 2000,
									icon: "none"
								})
								console.log(res);
							},
							complete: function(res) { //无论成功失败都会执行
							}
						})
					}
				})
			},
			// 发起获取实际距离位置请求
			mapControl() {
				uni.createMapContext("theMap", this).moveToLocation({
					longitude: this.longitude,
					latitude: this.latitude,
				});
				this.mapscale = 13;
			},
			resetScale(){
				this.mapscale =15;
			}
		},
		onLoad: function() {
			this.getMapAddress();
		},
		onReady() {
			this.setClass();
			this.countPrice();
		}

	}
</script>

<style scoped>
	.container {
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		padding: 0;
	}

	.main {
		background-color: rgba(255, 255, 255, 0.7);
		position: absolute;
		top: 50vh;
		width: 95vw;
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		padding: 20rpx;
	}

	.refresh {
		background-color: #FFF;
		width: 50rpx;
		height: 50rpx;
		box-shadow: 0 2rpx 3rpx 5rpx rgba(0, 0, 0, 0.1);
		border-radius: 10rpx;
		padding: 10rpx 0 5rpx 10rpx;
		margin-bottom: 20rpx;
	}

	.refresh image {
		height: 90%;
	}

	.box {
		background-color: #FFF;
		border-radius: 10rpx;
		box-shadow: 0 2rpx 3rpx 5rpx rgba(0, 0, 0, 0.1);
		;
		box-sizing: border-box;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.emp {
		color: #007AFF;
	}

	.operate {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-around;
	}

	.tool {
		display: flex;
		flex-flow: column nowrap;
		align-items: center;
	}

	.tool image {
		height: 3.5vh;
		padding: 16rpx;
		border-radius: 100%;
		margin: 10rpx 0;
	}

	.tool text {
		font-size: 0.7rem;
	}

	.canuse {
		background-color: #007AFF;
	}

	.cantuse {
		background-color: #bebebe;
	}

	scroll-view {
		height: 300rpx;
	}

	.message {
		display: flex;
		flex-flow: row nowrap;
		padding: 10rpx;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		margin-bottom: 10rpx;
	}

	.pic {
		width: 100rpx;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #007AFF;
		margin-right: 20rpx;
	}

	image {
		width: 50rpx;
	}

	.service {
		flex-grow: 2;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
	}


	.service text:first-child {
		font-size: 0.8rem;
	}

	.service text:last-child {
		font-size: 1.2rem;
		color: rgb(255, 126, 35);
		font-weight: bold;
	}

	#status {
		flex: 2 1 auto;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 0.9rem;
		color: #999999;
	}

	.count {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-end;
		font-size: 0.9rem;
	}

	.count text:last-child {
		font-weight: bold;
		color: red;
		margin-left: 15rpx;
	}

	.title.info {
		margin-top: 35rpx;
	}

	.title text,
	.title view {
		font-size: 0.8rem;
	}

	.title text:first-child {
		color: #a6a6a6;
	}

	.info {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
	}

	#copy {
		color: #007AFF;
		margin-left: 20rpx;
		display: inline-block;
	}
	
	.time{
		color: #007AFF;
	}
</style>
